<template>
	<view class="page-box">
		<u-form :model="form" ref="uForm">
			<u-form-item label="测验个数" prop="num">
				<u-input v-model="form.num" type="number" placeholer="请输入测验个数" />
			</u-form-item>
			<u-form-item label="测验范围" prop="radioVal">
				<u-radio-group v-model="form.radioVal">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.code">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<u-button type="primary" size="mini" @click="handleStartExam">开始测验</u-button>
		<!-- 开始答题 -->
		<view v-if="showExamDialog" class="dialog-bg">
			<view class="dialog-inner">
				<view class="prev-character">
					<u-icon name="arrow-left-double" @click="drawExamDialog(currCharacter.index-1)"
						v-if="currCharacter.index > 0"></u-icon>
				</view>
				<view class="this-character" :class="currCharacter.answerNew">
					{{currCharacter.characterName}}
				</view>
				<view class="next-character">
					<u-icon name="arrow-right-double" @click="drawExamDialog(currCharacter.index+1)"
						v-if="currCharacter.index < (allCharacterList.length - 1)"></u-icon>
				</view>
			</view>
			<CommonButtons :btnList="btnList" @handle-dealwith="handleDealwith"></CommonButtons>
			<!-- 正在加载 -->
			<Loading v-if="showLoading" :gifUrl="gifUrl"></Loading>
		</view>
	</view>
</template>

<script>
	let me;
	import CommonButtons from "@/components/common/commonButtons.vue";
	import Loading from "@/components/common/isLoading.vue";
	import funcs from "@/static/js/func.js";
	export default {
		data() {
			return {
				form: {
					num: "",
					radioVal: "",
				},
				radioList: [{
						name: "从前往后",
						code: "01"
					},
					{
						name: "从后往前",
						code: "02"
					},
					{
						name: "随机选取",
						code: "03"
					},
				],
				rules: {
					num: [{
						required: true,
						message: '请输入测验个数',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					radioVal: [{
						required: true,
						message: '请选择测验范围',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				},
				// 抽取结果
				allCharacterList: [], // 待测验的汉字列表
				showExamDialog: false, // 是否展示测验的弹框
				currCharacter: {}, // 当前是哪个字符
				btnList: [ // 按钮列表
					{
						id: 1,
						title: "关闭",
						action: "cancel",
						color: "gray",
						icon: "icon-fanhui"
					},
					{
						id: 2,
						title: "错误",
						action: "wrong",
						color: "#F03434",
						icon: "icon-cuowukongxin"
					},
					{
						id: 3,
						title: "正确",
						action: "right",
						color: "#27B727",
						icon: "icon-zhengque"
					},
				],
				// 加载中
				showLoading: false,
				gifUrl: "",
			}
		},
		components: {
			CommonButtons,
			Loading
		},
		computed: {

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			me = this;

		},
		methods: {
			/**
			 * 开始测验
			 */
			handleStartExam() {
				me.$refs.uForm.validate(valid => {
					if (valid) {
						me.gifUrl = `isLoading`;
						me.showLoading = true;
						me.$api.requestTask("/querySomeChineseCharacters", {
							num: me.form.num,
							range: me.form.radioVal
						}, res => {
							me.showLoading = false;
							if (res.code == "200") {
								me.allCharacterList = res.data;
								me.drawExamDialog(0);
							} else {
								funcs.showModalTips("查询失败，请重试~")
							}
						}, err => {
							me.showLoading = false;
							funcs.showModalTips("对不起，系统异常，请稍后重试~")
						});
					} else {
						console.log('验证失败');
					}
				});
			},
			/**
			 * 绘制弹框
			 */
			drawExamDialog(index) {
				me.currCharacter = me.allCharacterList[index];
				me.currCharacter.index = index;
				me.showExamDialog = true;
			},
			/**
			 * 底下的按钮
			 */
			handleDealwith(data) {
				if (data.action == "cancel") {
					me.allCharacterList = [];
					me.showExamDialog = false;
					uni.navigateBack()
				} else if (data.action == "wrong" || data.action == "right") {
					me.currCharacter.answerNew = data.action;
					if (data.action == "right") {
						me.gifUrl = `isRight${parseInt(Math.random()*2 + 1)}`;
					} else {
						me.gifUrl = `isWrong`;
					}
					me.showLoading = true;
					me.$api.requestTask("/setAnswer", {
						id: me.currCharacter.id,
						answer: data.action
					}, res => {
						me.showLoading = false;
						if (res.code == "200") {
							if (me.currCharacter.index < (me.allCharacterList.length - 1)) {
								me.drawExamDialog(me.currCharacter.index + 1);
							} else {
								let len = me.allCharacterList.length,
									rightNum = me.allCharacterList.filter(item => {
										return item.answerNew == "right"
									}).length;
								funcs.showModalTips(`本套试卷共有${len}题，答对${rightNum}题，很棒哟。需要从第一题回看吗？`, true,
									() => {
										me.drawExamDialog(0);
									}, () => {
										me.allCharacterList = [];
										me.showExamDialog = false;
										uni.navigateBack()
									})
							}
						} else {
							me.showLoading = false;
							funcs.showModalTips("操作失败，请重试~")
						}
					}, err => {
						funcs.showModalTips("对不起，系统异常，请稍后重试~")
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box {
		width: 100vw;
		height: 100vh;
		background-color: #eee;
		overflow-y: auto;
		padding: 24rpx;

		.u-form {
			.u-form-item {
				/deep/.u-form-item__body {
					.u-form-item--left {
						width: 160rpx !important;
						flex: 0 0 160rpx !important;
					}
				}
			}
		}

		.dialog-bg {
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 10;
			background-color: rgba(0, 0, 0, .5);
			text-align: center;

			.dialog-inner {
				width: 100vw;
				height: 60vh;
				margin-top: 20vh;
				display: flex;
				color: #fff;

				.this-character {
					flex: .7;
					height: 60vh;
					line-height: 60vh;
					background-color: #fff;
					color: #000;
					font-size: 200rpx;
				}

				.right {
					color: #27B727;
				}

				.wrong {
					color: #F03434;
				}

				.prev-character,
				.next-character {
					flex: .15;
					height: 60vh;
					line-height: 60vh;
					font-size: 2em;
				}
			}

			.dialog-close {
				width: 100vw;
				height: 10vh;
				line-height: 10vh;
				color: #fff;
				font-size: 2.4em;
			}
		}
	}
</style>